import React, { PureComponent } from "react";
import { createRef } from "react/cjs/react.production.min";

export default class App extends PureComponent {
  constructor() {
    super();
    this.spanRef = createRef();
    // this.spanEl = null;
    this.OneRef = createRef();
  }
  render() {
    return (
      <div>
        {/* <span ref="spanRef">test ref</span> */}
        {/* <span ref={this.spanRef}>test ref</span> */}
        {/* <span
          ref={(arg) => {
            this.spanEl = arg;
          }}
        >
          test ref
        </span> */}
        <One ref={this.OneRef}></One>
        <button onClick={(e) => this.changeText()}>change</button>
      </div>
    );
  }
  changeText() {
    // this.refs.spanRef.innerHTML = "hello";
    // this.spanRef.current.innerHTML = "hello";
    // console.log((this.spanEl.innerHTML = "12"));
    console.log(this.OneRef.current.add());
  }
}
class One extends PureComponent {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  render() {
    return <div onClick={(e) => this.add()}>当前count: {this.state.count}</div>;
  }
  add = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
}
